<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IX浏览器管理系统</title>
    <!-- 添加网站图标 -->
    <link rel="icon" href="/static/img/ixbrowser.png" type="image/png">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/css/admin.css">
    <style>
        .proxy-tag {
            margin-right: 5px;
        }
        .operate-button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px" class="sidebar">
                <div class="logo">
                    <i class="el-icon-monitor"></i>
                    <h3>IX浏览器管理</h3>
                </div>
                <el-menu 
                    :default-active="activeMenu"
                    background-color="#001529"
                    text-color="#b3b3b3"
                    active-text-color="#409EFF"
                    :collapse="isCollapse">
                    <el-menu-item index="user" @click="switchModule('user')">
                        <i class="el-icon-user"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="proxy" @click="switchModule('proxy')">
                        <i class="el-icon-connection"></i>
                        <span slot="title">代理管理</span>
                    </el-menu-item>
                </el-menu>
                <div class="sidebar-footer">
                    <span>© 2023 IX浏览器</span>
                </div>
            </el-aside>
            
            <el-container class="main-container">
                <!-- 头部 -->
                <el-header>
                    <div class="header-left">
                        <i class="el-icon-s-fold toggle-button" @click="toggleSidebar"></i>
                        <h2>{{ currentModule === 'user' ? '用户管理' : '代理管理' }}</h2>
                    </div>
                    <div class="header-right" v-if="currentModule === 'user'">
                        <el-button type="primary" icon="el-icon-refresh" @click="triggerExpiredCheck">检查过期用户</el-button>
                        <el-button type="success" icon="el-icon-plus" @click="showActivateBrowserDialog">分配浏览器</el-button>
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <i class="el-icon-user"></i>
                                <span class="admin-name">管理员</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-user">个人信息</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-switch-button" divided>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="header-right" v-if="currentModule === 'proxy'">
                        <!-- <el-button type="primary" icon="el-icon-refresh" @click="syncProxies">同步代理</el-button> -->
                        <el-button type="success" icon="el-icon-plus" @click="showCreateProxyDialog">添加代理</el-button>
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <i class="el-icon-user"></i>
                                <span class="admin-name">管理员</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-user">个人信息</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-switch-button" divided>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                
                <!-- 内容区域 -->
                <el-main>
                    <!-- 用户管理界面 -->
                    <div v-if="currentModule === 'user'">
                        <!-- 内容卡片 -->
                        <el-card class="box-card" shadow="hover">
                            <!-- 搜索区域 -->
                            <div class="search-row">
                                <el-form :inline="true" :model="userFilters" size="small">
                                    <el-form-item>
                                        <el-input v-model="userFilters.username" placeholder="请输入用户邮箱" prefix-icon="el-icon-user" clearable @clear="loadUsers">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input v-model="userFilters.browserType" placeholder="窗口名称" prefix-icon="el-icon-monitor" clearable @clear="loadUsers">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="loadUsers" icon="el-icon-search">搜索</el-button>
                                        <el-button type="default" @click="resetUserFilters" icon="el-icon-refresh-left">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            
                            <!-- 数据表格 -->
                            <el-table 
                                :data="users" 
                                border 
                                style="width: 100%" 
                                v-loading="userLoading"
                                :row-class-name="tableRowClassName"
                                :header-cell-style="{background:'#f5f7fa', color:'#606266', fontWeight: 'bold'}">
                                
                                <el-table-column type="selection" width="40"></el-table-column>
                                
                                <el-table-column prop="username" label="用户邮箱" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-link type="primary" @click="showDetail(scope.row)">{{ scope.row.username }}</el-link>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="workerName" label="成员名称" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-link type="primary" @click="showDetail(scope.row)">{{ scope.row.workerName }}</el-link>
                                    </template>
                                </el-table-column>
                               
                                
                                <el-table-column label="所属分组" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-tooltip 
                                            v-if="scope.row.groupNames && scope.row.groupNames.length > 1"
                                            :content="scope.row.groupNames.join(', ')"
                                            placement="top">
                                            <div>
                                                <span>{{ scope.row.groupNames[0] }}</span>
                                                <el-tag size="mini" type="info">+{{ scope.row.groupNames.length - 1 }}</el-tag>
                                            </div>
                                        </el-tooltip>
                                        <span v-else-if="scope.row.groupNames && scope.row.groupNames.length === 1">{{ scope.row.groupNames[0] }}</span>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="窗口名称" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-tag 
                                            v-for="(type, index) in scope.row.browserTypes" 
                                            :key="index"
                                            size="mini"
                                            :type="getBrowserTagType(type)"
                                            class="browser-tag">
                                            {{ type }}
                                        </el-tag>
                                        <span v-if="!scope.row.browserTypes || scope.row.browserTypes.length === 0">-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="窗口名称" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-tag 
                                            v-for="(type, index) in scope.row.browserTags" 
                                            :key="index"
                                            size="mini"
                                            :type="getBrowserTagType(type)"
                                            class="browser-tag">
                                            {{ type }}
                                        </el-tag>
                                        <span v-if="!scope.row.browserTypes || scope.row.browserTypes.length === 0">-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.isActive ? 'success' : 'danger'" size="medium">
                                            {{ scope.row.isActive ? '启用' : '禁用' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column label="操作" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="text" icon="el-icon-view" @click="showDetail(scope.row)" class="operate-button">详情</el-button>
                                        <el-button type="text" class="danger-text operate-button" icon="el-icon-delete" @click="confirmDeleteUser(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            
                            <!-- 空数据显示 -->
                            <div v-if="users.length === 0 && !userLoading" class="empty-data">
                                <i class="el-icon-document"></i>
                                <p>暂无数据</p>
                            </div>
                            
                            <!-- 分页 -->
                            <div class="pagination-container">
                                <el-pagination
                                    @size-change="handleUserSizeChange"
                                    @current-change="handleUserCurrentChange"
                                    :current-page="userPagination.page"
                                    :page-sizes="[10, 20, 50, 100]"
                                    :page-size="userPagination.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="userPagination.total"
                                    background>
                                </el-pagination>
                            </div>
                        </el-card>
                    </div>

                    <!-- 代理管理界面 -->
                    <div v-if="currentModule === 'proxy'">
                        <!-- 内容卡片 -->
                        <el-card class="box-card" shadow="hover">
                            <!-- 搜索区域 -->
                            <div class="search-row">
                                <el-form :inline="true" :model="proxyFilters" size="small">
                                    <el-form-item>
                                        <el-input v-model="proxyFilters.proxyIP" placeholder="请输入代理IP" prefix-icon="el-icon-location" clearable @clear="loadProxies">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input v-model="proxyFilters.proxyUser" placeholder="请输入代理用户名" prefix-icon="el-icon-user" clearable @clear="loadProxies">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="proxyFilters.proxyType" placeholder="代理类型" clearable @clear="loadProxies">
                                            <el-option label="HTTP" value="http"></el-option>
                                            <el-option label="SOCKS5" value="socks5"></el-option>
                                            <el-option label="SSH" value="ssh"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="loadProxies" icon="el-icon-search">搜索</el-button>
                                        <el-button type="default" @click="resetProxyFilters" icon="el-icon-refresh-left">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            
                            <!-- 数据表格 -->
                            <el-table 
                                :data="proxies" 
                                border 
                                style="width: 100%" 
                                v-loading="proxyLoading"
                                :header-cell-style="{background:'#f5f7fa', color:'#606266', fontWeight: 'bold'}">
                                
                                <el-table-column type="selection" width="40"></el-table-column>
                                
                                <el-table-column prop="ProxyIP" label="代理IP" min-width="120" align="center"></el-table-column>
                                
                                <el-table-column prop="ProxyPort" label="端口" min-width="80" align="center"></el-table-column>
                                
                                <el-table-column prop="ProxyType" label="窗口名称" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-tag size="mini" :type="getProxyTypeTagType(scope.row.ProxyType)">
                                            {{ scope.row.ProxyType.toUpperCase() }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column prop="ProxyUser" label="用户名" min-width="120" align="center">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.ProxyUser || '-' }}</span>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column prop="ProxyPassword" label="密码" min-width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-popover
                                            placement="top"
                                            width="200"
                                            trigger="click"
                                            v-if="scope.row.ProxyPassword">
                                            <div>{{ scope.row.ProxyPassword }}</div>
                                            <el-button slot="reference" size="mini" type="text">查看密码</el-button>
                                        </el-popover>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column prop="Note" label="备注" min-width="150" align="center">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.Note || '-' }}</span>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column label="操作" min-width="160" align="center" fixed="right">
                                    <template slot-scope="scope">
                                        <el-button type="text" icon="el-icon-edit" @click="showUpdateProxyDialog(scope.row)" class="operate-button">编辑</el-button>
                                        <el-button type="text" class="danger-text operate-button" icon="el-icon-delete" @click="confirmDeleteProxy(scope.row)">删除</el-button>
                                        <el-button type="text" class="success-text operate-button" icon="el-icon-connection" @click="showApplyProxyDialog(scope.row)">应用代理</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            
                            <!-- 空数据显示 -->
                            <div v-if="proxies.length === 0 && !proxyLoading" class="empty-data">
                                <i class="el-icon-document"></i>
                                <p>暂无数据</p>
                            </div>
                            
                            <!-- 分页 -->
                            <div class="pagination-container">
                                <el-pagination
                                    @size-change="handleProxySizeChange"
                                    @current-change="handleProxyCurrentChange"
                                    :current-page="proxyPagination.page"
                                    :page-sizes="[10, 20, 50, 100]"
                                    :page-size="proxyPagination.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="proxyPagination.total"
                                    background>
                                </el-pagination>
                            </div>
                        </el-card>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        
        <!-- 用户详情对话框 -->
        <el-dialog title="用户详情" :visible.sync="detailDialogVisible" width="65%" custom-class="detail-dialog" v-if="currentModule === 'user'">
            <div v-loading="loading">
                <!-- 用户信息和基本操作 -->
                <el-card shadow="never" class="detail-card">
                    <div class="user-info-header">
                        <div class="user-info-main">
                            <i class="el-icon-user user-icon"></i>
                            <div class="user-info-content">
                                <h3>{{ currentUser ? currentUser.username : '加载中...' }}</h3>
                                <div class="user-info-meta">
                                    <el-tag v-if="currentUser" :type="currentUser.active ? 'success' : 'danger'" size="small">
                                        {{ currentUser && currentUser.active ? '已启用' : '已禁用' }}
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                        <div class="user-info-actions">
                            <!-- <el-button 
                                size="small" 
                                :type="currentUser && currentUser.active ? 'warning' : 'success'"
                                @click="toggleUserStatusInDetail"
                                plain>
                                {{ currentUser && currentUser.active ? '禁用用户' : '启用用户' }}
                            </el-button> -->
                            <el-button size="small" type="danger" plain @click="confirmDeleteCurrentUser">删除用户</el-button>
                        </div>
                    </div>
                </el-card>
                
                <!-- 分组和浏览器信息 -->
                <el-card shadow="never" class="detail-card">
                    <div slot="header" class="clearfix">
                        <span><i class="el-icon-folder-opened"></i> 分组和浏览器</span>
                    </div>
                    
                    <div v-if="userBrowserComposites && userBrowserComposites.length > 0">
                        <el-collapse accordion>
                            <el-collapse-item v-for="(group, groupIndex) in userBrowserComposites" :key="'group-'+groupIndex">
                                <template slot="title">
                                    <div class="group-title-container">
                                        <span class="group-title">{{ group.group_name }}</span>
                                        <el-tag size="mini" :type="group.active ? 'success' : 'danger'" class="group-status-tag">
                                            {{ group.active ? '启用' : '禁用' }}
                                        </el-tag>
                                    </div>
                                </template>
                                
                                <el-table
                                    :data="group.browsers"
                                    style="width: 100%"
                                    border
                                    size="small">
                                    <el-table-column prop="browser_name" label="窗口名称" min-width="100" align="center"></el-table-column>
                                    <el-table-column prop="browser_type" label="浏览器账号" min-width="100" align="center">
                                        <template slot-scope="scope">
                                            <el-tag size="mini" :type="getBrowserTagType(scope.row.browser_type)">
                                                {{ scope.row.browser_type }}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="过期时间" min-width="100" align="center">
                                        <template slot-scope="scope">
                                            {{ formatDate(scope.row.expiration_time) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="状态" min-width="100" align="center">
                                        <template slot-scope="scope">
                                            <el-tag size="mini" :type="scope.row.active ? 'success' : 'danger'">
                                                {{ scope.row.active ? '启用' : '禁用' }}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" min-width="100" align="center">
                                        <template slot-scope="scope">
                                            <el-button 
                                                size="mini" 
                                                type="primary"
                                                @click="showUpdateExpiration(scope.row.id)">
                                                修改过期时间
                                            </el-button>
                                            <!-- <el-button 
                                                size="mini" 
                                                :type="scope.row.active ? 'warning' : 'success'"
                                                @click="toggleBrowserStatus(scope.row.id, scope.row.active)">
                                                {{ scope.row.active ? '禁用' : '启用' }}
                                            </el-button> -->
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    <div v-else class="empty-data">
                        <i class="el-icon-folder"></i>
                        <p>该用户没有组或浏览器信息</p>
                    </div>
                </el-card>
                
                <!-- 员工信息 -->
                <el-card v-if="currentEmployee" shadow="never" class="detail-card">
                    <div slot="header" class="clearfix">
                        <span><i class="el-icon-user-solid"></i> 关联员工信息</span>
                    </div>
                    
                    <el-descriptions :column="3" border size="small">
                        <el-descriptions-item label="员工ID">{{ currentEmployee.id }}</el-descriptions-item>
                        <el-descriptions-item label="员工姓名">{{ currentEmployee.name }}</el-descriptions-item>
                        <el-descriptions-item label="邮箱">{{ currentEmployee.mailbox }}</el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </div>
        </el-dialog>
        
        <!-- 修改过期时间对话框 -->
        <el-dialog
            title="修改过期时间"
            :visible.sync="expirationDialogVisible"
            width="450px"
            center
            v-if="currentModule === 'user'">
            <el-form :model="expirationForm" label-width="100px">
                <el-form-item label="过期时间">
                    <el-date-picker
                        v-model="expirationForm.time"
                        type="datetime"
                        placeholder="选择过期时间"
                        value-format="timestamp"
                        :picker-options="{disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; }}">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="expirationDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateExpiration">确定</el-button>
            </div>
        </el-dialog>
        
        <!-- 激活浏览器对话框 -->
        <el-dialog
            title="分配浏览器"
            :visible.sync="activateBrowserDialogVisible"
            width="500px"
            center
            v-if="currentModule === 'user'">
            <el-form :model="activateForm" :rules="activateRules" ref="activateForm" label-width="120px" status-icon>
                <el-form-item label="用户邮箱" prop="username">
                    <el-input v-model="activateForm.username" placeholder="请输入用户邮箱" clearable></el-input>
                </el-form-item>
                <el-form-item label="基础浏览器账号" prop="baseBrowserAccount">
                    <el-input v-model="activateForm.baseBrowserAccount" placeholder="请输入基础浏览器账号" clearable></el-input>
                </el-form-item>
                <el-form-item label="到期时间" prop="activateTime">
                    <el-date-picker
                        v-model="activateForm.activateTime"
                        type="datetime"
                        placeholder="请选择激活有效期"
                        style="width: 100%"
                        value-format="timestamp"
                        :picker-options="{disabledDate(time) { return time.getTime() < Date.now(); }}">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="activate-result" v-if="activateResult">
                <el-alert
                    :title="activateResult.success ? '激活成功' : '激活失败'"
                    :type="activateResult.success ? 'success' : 'error'"
                    :description="activateResult.message"
                    show-icon
                    :closable="false">
                </el-alert>
                <div v-if="activateResult.success && activateResult.data" class="activate-result-details">
                    <el-descriptions border size="small" :column="1">
                        <el-descriptions-item label="成员名称">{{ activateResult.data.username }}</el-descriptions-item>
                        <el-descriptions-item label="基础浏览器账号">{{ activateResult.data.browser_type }}</el-descriptions-item>
                        <el-descriptions-item label="浏览器名称">{{ activateResult.data.browser_name }}</el-descriptions-item>
                        <el-descriptions-item label="分组名称">{{ activateResult.data.group_name }}</el-descriptions-item>
                        <el-descriptions-item label="过期时间">{{ formatDate(activateResult.data.expiration_time) }}</el-descriptions-item>
                    </el-descriptions>
                    
                    <div class="mt-3 text-center" v-if="activateResult.success">
                        <el-button type="success" @click="activateBrowserDialogVisible = false">
                            <i class="el-icon-check"></i> 返回用户列表
                        </el-button>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <div v-if="!activateResult || !activateResult.success">
                    <el-button @click="activateBrowserDialogVisible = false">关闭</el-button>
                    <el-button 
                        type="primary" 
                        @click="submitActivate" 
                        :loading="activateSubmitting">
                        激活
                    </el-button>
                </div>
            </div>
        </el-dialog>
        
        <!-- 添加/编辑代理对话框 -->
        <el-dialog :title="proxyDialogTitle" :visible.sync="proxyDialogVisible" width="500px" v-if="currentModule === 'proxy'">
            <el-form :model="proxyForm" :rules="proxyRules" ref="proxyForm" label-width="100px" status-icon>
                <el-form-item label="代理类型" prop="proxyType">
                    <el-select v-model="proxyForm.proxyType" placeholder="请选择代理类型" style="width: 100%">
                        <el-option label="HTTP" value="http"></el-option>
                        <el-option label="SOCKS5" value="socks5"></el-option>
                        <el-option label="SSH" value="ssh"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="代理IP" prop="proxyIP">
                    <el-input v-model="proxyForm.proxyIP" placeholder="请输入代理IP或域名"></el-input>
                </el-form-item>
                <el-form-item label="端口" prop="proxyPort">
                    <el-input v-model="proxyForm.proxyPort" placeholder="请输入代理端口"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="proxyUser">
                    <el-input v-model="proxyForm.proxyUser" placeholder="请输入代理用户名（可选）"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="proxyPassword">
                    <el-input v-model="proxyForm.proxyPassword" placeholder="请输入代理密码（可选）" show-password></el-input>
                </el-form-item>
                <el-form-item label="标签ID" prop="proxyTagID">
                    <el-input v-model="proxyForm.proxyTagID" placeholder="请输入标签ID（可选）"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                    <el-input v-model="proxyForm.note" type="textarea" placeholder="请输入备注信息（可选）"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="proxyDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitProxyForm" :loading="submitLoading">确定</el-button>
            </div>
        </el-dialog>
        
        <!-- 同步结果对话框 -->
        <el-dialog title="代理同步结果" :visible.sync="syncDialogVisible" width="600px" v-if="currentModule === 'proxy'">
            <div v-if="syncResult" class="sync-result">
                <el-alert type="success" :title="syncResult.message" :closable="false"></el-alert>
                <el-descriptions :column="1" border style="margin-top: 20px">
                    <el-descriptions-item label="总代理数量">{{ syncResult.total }}</el-descriptions-item>
                    <el-descriptions-item label="同步数量">{{ syncResult.syncCount }}</el-descriptions-item>
                </el-descriptions>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="syncDialogVisible = false">确定</el-button>
            </div>
        </el-dialog>

        <!-- 应用代理到用户对话框 -->
        <el-dialog title="应用代理到用户" :visible.sync="applyProxyDialogVisible" width="78%" v-if="currentModule === 'proxy'">
            <div v-loading="applyLoading">
                <p>您正在将以下代理应用到用户浏览器：</p>
                <div class="proxy-info" v-if="currentProxy">
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="代理类型">
                            <el-tag size="medium" :type="getProxyTypeTagType(currentProxy.ProxyType)">
                                {{ currentProxy.ProxyType.toUpperCase() }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="代理IP">{{ currentProxy.ProxyIP }}</el-descriptions-item>
                        <el-descriptions-item label="端口">{{ currentProxy.ProxyPort }}</el-descriptions-item>
                        <el-descriptions-item label="用户名">{{ currentProxy.ProxyUser || '-' }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                
                <div class="user-selection-container" style="margin-top: 20px;">
                    <div class="user-selection-header" style="margin-bottom: 10px;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <span style="font-size: 16px; font-weight: bold;">选择浏览器</span>
                            <el-checkbox v-model="selectAllBrowsers" @change="handleSelectAllBrowsers">全选</el-checkbox>
                        </div>
                        <el-input 
                            v-model="browserSearchKeyword"
                            placeholder="搜索浏览器名称、类型、用户名或分组"
                            prefix-icon="el-icon-search"
                            style="margin: 10px 0;"
                            clearable>
                        </el-input>
                    </div>
                    
                    <el-table
                        ref="browserSelectionTable"
                        :data="filteredBrowsers"
                        style="width: 100%"
                        @selection-change="handleBrowserSelectionChange"
                        :span-method="objectSpanMethod"
                        border
                        max-height="300px">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            prop="browserName"
                            label="浏览器名称"
                            min-width="200">
                        </el-table-column>
                        <el-table-column
                            prop="browserType"
                            label="窗口名称"
                            min-width="200">
                            <template slot-scope="scope">
                                <el-tag size="mini" :type="getBrowserTagType(scope.row.browserType)">
                                    {{ scope.row.browserType }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="externalBrowserId"
                            label="外部ID"
                            min-width="90">
                        </el-table-column>
                        <el-table-column
                            prop="username"
                            label="用户邮箱"
                            min-width="150">
                        </el-table-column>
                        <el-table-column
                            prop="groupName"
                            label="分组名称"
                            min-width="150">
                        </el-table-column>
                        <el-table-column
                        label="当前代理" 
                        min-width="90">
                        <template slot-scope="scope">
                            <div v-if="scope.row.currentProxy">
                                <el-tooltip :content="'Proxy ID: ' + (scope.row.currentProxy.proxyId || 'N/A')" placement="top">
                                    <span>{{ scope.row.currentProxy.proxyIP }}:{{ scope.row.currentProxy.proxyPort }}</span>
                                </el-tooltip>
                            </div>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    </el-table>
                    <div v-if="filteredBrowsers.length === 0 && !applyLoading" class="empty-data">
                        <i class="el-icon-monitor"></i>
                        <p>暂无浏览器数据</p>
                    </div>
                </div>
                
                <div class="result-container" v-if="applyResult.length > 0" style="margin-top: 20px;">
                    <el-divider>应用结果</el-divider>
                    <el-table :data="applyResult" size="small" border>
                        <el-table-column prop="username" label="用户名" min-width="100"></el-table-column>
                        <el-table-column prop="browserName" label="浏览器名称" min-width="100"></el-table-column>
                        <el-table-column label="状态" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.success ? 'success' : 'danger'" size="mini">
                                    {{ scope.row.success ? '成功' : '失败' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="message" label="详情" min-width="150"></el-table-column>
                    </el-table>
                    
                    <el-statistic style="margin-top: 15px; text-align: right;">
                        <template slot="title">
                            <div style="display: flex; align-items: center; justify-content: flex-end;">
                                <span>成功率</span>
                                <i class="el-icon-info" style="margin-left: 5px;" 
                                   title="成功更新的浏览器数量 / 总计尝试更新的浏览器数量"></i>
                            </div>
                        </template>
                        <template slot="value">
                            {{ getSuccessRate() }}
                        </template>
                    </el-statistic>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="applyProxyDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="applyProxyToSelectedBrowsers" :loading="applyLoading" :disabled="selectedBrowsers.length === 0">应用代理</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- 引入Vue和Element UI -->
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/index.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="/static/js/admin-spa.js"></script>
</body>
</html> 